<template>
	<div>
		<app-header></app-header>
		<ul class="choose_ul">
			<li class="findArea" style="position: relative;">
				区域
				<input type="text" name="" id="txt_area"   style="opacity: 0;position: absolute;left: 0;top: 0;width: 100%;height: 100%;"/>
				<i class="iconfont icon-xiangxia"></i>
			</li>
			<li class="findPrice">
				价格
				<i class="iconfont icon-xiangxia"></i>
				<div class="time_list" id="findPrice" style="display: none;top: 0.8rem;">
					<ul>
						<li v-for="item in dataPrice" :key=item.index>{{item.name}}<span class="iconfont icon-duigou"></span></li>
					</ul>
				</div>
			</li>
			<li class="findType">
				户型
				<i class="iconfont icon-xiangxia"></i>
				<div class="time_list" id="findType" style="display: none;top: 0.8rem;">          
					<ul>
						<li v-for="item in dataHouse" :key=item.index>{{item.name.aggregate}}<span class="iconfont icon-duigou"></span></li>
					</ul>
				</div>
			</li>
		</ul>
		<p class="count_result">
			共{{resultNum}}个结果
		</p>
		<ol class="result_list">
			<li v-for = "item in dataList" :key=item.index>
				<img :src="item.images"/>
				<div class="result_list_right">
					<p class="p1">
						{{item.name}}
					</p>
					<p class="p2">
						<span class="span1">{{item.zh?item.zh:5}}分</span>
						<span class="span2">{{item.evaluates_count}}条评论</span>
						<span class="span3"><b>{{item.ck_price}}</b>{{item.price_type}} </span>
					</p>
					<p class="p3">
						<span>{{item.salesstatus_name}}</span>
						<span>{{item.new_addr}}</span>
					</p>
					<p class="p4">
						<span v-for="item2 in item.labels" :key=item2.index :style="{color: item2.color}">{{item2.name}}</span>
					</p>
				</div>
			</li>
		</ol>
	</div>
</template>

<script>
	import Header from '@/components/Public/Header'
	export default{
		name:'Project',
		data(){
			return {
				dataPrice:[],
				dataHouse:[],
				dataList:[],
				resultNum:0
			}
		},
		created(){
			this.$axios.get('House/houses_list')
			.then(res=>{
				this.dataList = res.data.list
			}).catch(err=>console.log(err))		
		},
		mounted() {

		},
		beforeRouteEnter(to, from, next) {
			next(vm => {			
				vm.$emit('header', true) //回到home页面的时候通过路由钩子函数来让头部显示
			})
		},
		components:{
			'app-header':Header
		}
	}
</script>
<style scoped lang="less">
	.wh(@w, @h) {
		    width: @w;
		    height: @h;
		}
	.choose_ul {
	    .wh(100%, 1.2rem);
	    position: relative;
	    background: #fff;
	    z-index: 21;
	    li {
	//      position: relative;
	        text-align: center;
	        line-height: 1.2rem;
	        .wh(33.33%, 1.2rem);
	        float: left;
	        box-sizing: border-box;
	        font-size: 0.22rem;
	        border-bottom: 0.01rem solid #F6F6F6;
	        border-right: 0.01rem solid #F6F6F6;
	        i {
	            color: #bcbbbb;
	        }
	        .icon-xiangshang{
	            color: #FE8A76;
	        }
	    }
	}
	.count_result {
	    .wh(100%, 0.8rem);
	    line-height: 0.8rem;
	    font-size: 0.2rem;
	    color: #8D8D8D;
	    border-bottom: 0.01rem solid #F6F6F6;
	    padding-left: 0.3rem;
	    box-sizing: border-box;
	}
	.result_list {
	    .wh(100%, auto);
	    .Remaining{
	        .wh(100%,1.05rem);
	        background: #F6F6F6;
	        p:nth-of-type(1){
	            font-size: 0.2rem;
	            color: #989898;
	            padding-left: 0.2rem;
	            padding-top: 0.1rem;
	        }
	        p:nth-of-type(2){
	            color: #FE8A76;
	            line-height: 0.6rem;
	            i{
	                font-size: 0.28rem;
	                padding-left: 0.2rem;
	            }
	        }
	    }
	    li {
	        .wh(100%, auto);
	        overflow: hidden;
	        border-bottom: 0.01rem solid #F6F6F6;
	        img {
	            float: left;
	            margin: 0.18rem 0.24rem 0.2rem 0.3rem;
	            .wh(2.4rem, 2.2rem);
	        }
	        .result_list_right {
	            float: left;
	            .wh(62%, auto);
	            margin: 0.18rem 0 0.2rem;
	            .p1 {
	                font-size: 0.26rem;
	                color: #3b3b3b;
	                line-height: 0.52rem;
	            }
	            .p2 {
	                position: relative;
	                line-height: 0.6rem;
	                .span1 {
	                    font-size: 0.18rem;
	                }
	                .span2 {
	                    font-size: 0.16rem;
	                    margin-left: 0.18rem;
	                    color: #b4b4b4;
	                }
	                .span3 {
	                    float: right;
	                    color: #fe8a76;
	                    font-size: 0.18rem;
	                    position: absolute;
	                    right: 0.3rem;
	                    b {
	                        font-size: 0.24rem;
	                    }
	                }
	            }
	            .p3 {
	                display: block;
	                height: 0.6rem;
	                overflow: hidden;
	                margin-top: -0.1rem;
	                line-height: 0.6rem;
	                span:nth-of-type(1) {
	                    font-size: 0.18rem;
	                    color: #FE8A76;
	                }
	                span:nth-of-type(2) {
	                    font-size: 0.16rem;
	                    color: #B4B4B4;
	                }
	            }
	            .p4 {
	                span {
	                    display: inline-block;
	                    float: left;
	                    margin-top: 0.1rem;
	                    margin-right: 0.1rem;
	                    font-size: 0.16rem;
	                    padding: 0.04rem 0.06rem;
	                    color: #608baf;
	                    border: 1px solid #608BAF;
	                    border-radius: 0.1rem;
	                }
	            }
	        }
	    }
	}
</style>
